<template>
  <base-modal name="slide-down" :show.sync="show" :width="maxDeep>3?'1085px':'800px'" class="cascader-setting-modal">
    <div slot="title" class="cascader-setting-modal-header">
      <div class="cascader-setting-msg">
        <span>{{$t('common.base.configurationOption')}}</span>
        <small v-if="canSetDefault">{{$t('common.form.tip.cascader.tips1')}}<i class="iconfont icon-check-fill"></i>{{$t('common.form.tip.cascader.tips2')}}</small>
      </div>
      <div class="cascader-setting-deep">
        <label>{{$t('common.base.series')}}： </label>
        <el-select v-model="maxDeep" :placeholder="$t('common.placeholder.select')" @change="changeMaxDeep">
          <el-option :label="$t('common.base.level', {data1:$t('common.base.number2')})" :value="2"></el-option>
          <el-option :label="$t('common.base.level', {data1:$t('common.base.number3')})" :value="3"></el-option>
          <el-option :label="$t('common.base.level', {data1:$t('common.base.number4')})" :value="4"></el-option>
          <el-option :label="$t('common.base.level', {data1:$t('common.base.number5')})" :value="5"></el-option>
        </el-select>
      </div>  
    </div>
    
    <!-- start 配置选项区域 -->
    <div class="cascader-setting-modal-body">
      <div class="cascader-setting-panel" :style="{width: `${100 / maxDeep}%`}" v-for="(option, index) in selectedOption" :key="index">
        <h3>{{$t('common.base.levelOption', {data1:deepZhChar[index]})}}</h3>        
        <div class="cascader-setting-option-list" ref="list">
          <draggable tag="div" :list="option.children" v-bind="{ animation:380, handle:'.handle' }">
            <cascader-setting-option 
              v-for="item in option.children" 
              :key="item.id" 
              v-model="item.value" 
              :mode="mode"
              :option="item" 
              :allow-remove="option.children.length > 1" 
              :active="item.active"
              :can-set-default="canSetDefault && (checkStrictly || !item.children.length)"
              @setlanguage="data => setlanguage(data, item)"
              @choose="chooseOption"
              @remove="removeOption" 
              @change-default="changeDefaultOption"/>
          </draggable>
        </div>          
        <div class="cascader-setting-operation">
          <span @click="addChildrenOption(option,index)" class="btn-text">{{$t('common.base.addOption')}}</span>
          <span @click="showMultiBatchModal(option,index)" class="btn-text">{{$t('common.base.bulkEdit')}}</span>
        </div>
      </div>  
    </div>
    <!-- end 配置选项区域 -->
    
    <div v-if="canSetDefault" class="cascader-setting-default-text">
      <span>{{$t('common.base.defaultOption')}}:</span> 
      <span>{{defaultValueText}}</span>
    </div>

    <div class="cascader-setting-modal-footer dialog-footer" slot="footer">
      <div class="cascader-setting-import-btn">
        <!-- <span class="btn-text" @click="openImportDialog()">批量导入</span>
        <span class="btn-text" @click="exportConfig">批量导出</span> -->
        <el-button type="plain-third" @click="openImportDialog()">{{$t('common.base.batchImport')}}</el-button>
        <el-button type="plain-third" @click="exportConfig">{{$t('common.base.batchExport')}}</el-button>
      </div>
      <el-button @click="close">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="submit">{{$t('common.base.save')}}</el-button>
    </div>

    <!-- start 批量编辑 -->
    <base-modal 
      :title="$t('common.base.batchEditOptions')" width="520px" class="form-select-setting-modal"
      :show.sync="batchModalShow" :mask-closeable="false">
      <div class="form-select-setting-batch">
        <textarea :value="optionText" @input="updateOptionText(...arguments, 'cascader')" rows="10"></textarea>
        <div class="form-select-setting-warn" v-if="errMessage">{{errMessage}}</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="form-select-tips">{{$t('common.base.everyLinePointToOneOption')}}</span>
        <el-button @click="batchModalShow = false">{{$t('common.base.cancel')}}</el-button>
        <el-button type="primary" @click="batchEdit">{{$t('common.base.save')}}</el-button>
      </div>
    </base-modal>
    <!-- end 批量编辑 -->

    <!-- start 批量导入 -->
    <base-import
      :title="$t('common.base.batchImport')"
      ref="bulkImport"
      :is-import-now="isImportNow"
      @success="importSucc"
      @fail="importFail"
      :action="`${formForemCascaderCascaderSetting}?maxDeep=${maxDeep}`"
    >
      <div slot="tip">
        <div class="base-import-warn">
          <p style="margin: 0">
            <!-- TODO 语序问题 -->
            {{$t('common.form.tip.cascader.tips4')}}
            <a :href="`${formForemCascaderCascaderSettingTem}?maxDeep=${maxDeep}`">{{$t('common.base.importModal.importTemplate')}}</a>{{$t('common.form.tip.cascader.tips5')}}
          </p>
        </div>
      </div>
    </base-import>
    <!-- 批量导入 -->
  </base-modal>
</template>

<script>
import * as FormUtil from '@src/component/form/util';
import _ from 'lodash';
import draggable from 'vuedraggable';
import platform from '@src/platform';
import Option, { initOptionId } from './Option.js';
import CascaderSettingOption from './CascaderSettingOption.vue';
import SettingMixin from '@src/component/form/mixin/setting';
import FormSelectMixin from '@src/component/form/mixin/form.select';
import * as ExcelsApi from '@src/api/ExcelsApi'
// TODO: 根据最大级数选择选项，保证每一级至少有一个选项
// TODO: 切换级数时，超出级数的选项删除，不满足的补全
/* export & import */
import { formForemCascaderCascaderSetting, formForemCascaderCascaderSettingTem } from '@src/api/Import';
import { getCommonDefaultLangForKey, getDefaultLangOpts, isOpenMultiLanguage, isMultiLangModules } from '@src/component/util/multiLang/index';
import locales, { t } from '@src/locales';
import { getMainLanguageKey } from '@hooks/useFormMultiLanguage'

export default {
  name: 'cascader-setting',
  mixins: [SettingMixin, FormSelectMixin],
  props: {
    field: {
      type: Object,
      default: () => ({}),
    },
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    },
    defaultValue: {
      type: Array,
      default: () => []
    },
    dataSourceLanguage: {
      type: Object,
      default: () => {}
    },
    mode: {
      type: String,
      default: ''
    },
    // 是否可以设置默认值 
    canSetDefault: {
      type: Boolean,
      default: true,
    },
    // 是否支持任意层级多选
    checkStrictly: {
      type: Boolean,
      default: false,
    },
  },
  data(){
    return {
      isImportNow: true, // 是否是导入立刻刷新
      defaultValueText: '--',
      deepZhChar: [t('common.base.number1'),t('common.base.number2'),t('common.base.number3'),t('common.base.number4'),t('common.base.number5')],
      source: null,
      selectedOption: [],
      maxDeep: 2,
      batchModalShow: false, 
      optionText: '', // 批量编辑文本
      errMessage: null,
      currentLevel: null, // 当前级别下标
      formForemCascaderCascaderSetting,
      formForemCascaderCascaderSettingTem
    }
  },
  computed: {
    // 事件表单+回执表单显示多语言配置
    isShow() {
      return isMultiLangModules(this.mode);
    }
  },
  methods: {
    // 批量导入
    openImportDialog(){
      let repeat = this.checkTreeNodeRepeat(this.source);
      if(repeat.length){
        FormUtil.notification([{ message:repeat, title: this.$t('common.base.duplicates')}], this.$createElement);
        return;
      }
      this.$refs.bulkImport.open();
    },
    /**
     * 下载配置数据
     */
    async exportConfig(){
      try {
        const dataToSend = {
          dataSource: this.genExportOpetions(),
          maxDeep: this.maxDeep,
        }
        if(!dataToSend.dataSource.length){
          this.$platform.toast(this.$t('common.form.tip.cascader.tips6'), 'error');
          return;
        }
        await ExcelsApi.exportCascaderOptions(dataToSend);
      } catch (error) {
        console.error('export error', error)
      }
    },
    /**
     * 下载配置厨具处理
     */
    genExportOpetions(){
      const genList = (list) => {
        let arr = [];
        for(let v of list){
          if(v.value === '') continue;
          arr.push({
            value: v.value,
            children: genList(v.children),
          })
        }
        return arr;
      }
      return genList(this.source.children);
    },
    importSucc(res){
      let { data } = res;
      // data.forEach(item=>{
      //   this.mergeTreeOption(this.source,item);
      // })
      let newOptions = this.mergeTreeOption(this.exportSetting(this.source).dataSource, data);

      this.source = this.initSource(null, false, newOptions, null, null, this.isShow);

      this.initselectedOption();

    },
    importFail(error) {
      this.$message.error(error);
    },
    // TODO:追加合并树节点
    mergeTreeOption(oldTree, newTree) {
      let objMap = {};
      let tree = [];
      if (!oldTree && !newTree) return []
      if(!oldTree) return newTree;
      if(!newTree) return oldTree;
      oldTree.forEach(item=>{
        objMap[item.value] = item.children || []
      });
      newTree.forEach(item=>{
        if(objMap[item.value]){
          objMap[item.value] = this.mergeTreeOption(objMap[item.value], item.children)
        }else{
          objMap[item.value] = item.children || []
        }
      });
      for(let key in objMap){
        tree.push({
          value:key,
          children:objMap[key]
        })
      }
      return tree 
    },
    // mergeTreeOption(parent,item){
    //   // 递归合并树节点
    //   const { value ,children } = item;
    //   let name = value ?  value: `${this.deepZhChar[parent.deep]}级选项 ${parent.children.length + 1}`;
    //   let option = new Option(name, false, parent);
    //   if( Array.isArray(children) && children.length>0 ){
    //     children.forEach(element=>{
    //       this.mergeTreeOption(option,element);
    //     })
    //   } 
    //   parent.children.push(option);
    // },
    // 批量编辑
    batchEdit(){
      let newValues = this.optionText.split('\n').filter(option => option);
      const parent = this.selectedOption[this.currentLevel];
      if(!newValues.length) {
        platform.alert(this.$t('common.base.tip.evenHaveOneOption'));
        return false;
      }
      this.errMessage = this.validateOptions(newValues);
      if(this.errMessage) return;
      let newOptions = newValues.map((item, index) =>{
        let optionSelect;
        let currentOption = parent.children[index]; // 当前节点
        if(currentOption){ // 如果原option列表有这个节点，只改名称
          currentOption.value = item;
          optionSelect = currentOption;
        } else { // 新增节点，递归插入数据
          optionSelect = this.addNewOption(parent, item);
        }
        return optionSelect
      });
      // 更新数据
      this.selectedOption[this.currentLevel].children = newOptions;
      this.batchModalShow = false;

    },
    addNewOption(parent, name){ // 递归创建新节点
      let value = name ? name : `${this.$t('common.base.levelOption', {data1:this.deepZhChar[parent.deep]})} ${parent.children.length + 1}`;
      let optionSelect = new Option(value, false, parent);
      if(optionSelect.deep < this.maxDeep) this.addNewOption(optionSelect)
      parent.children.push(optionSelect);
      this.chooseOption(optionSelect, true); // 将新生成节点记录选择项
      return optionSelect;
    },
    /** 修改默认值 */
    changeDefaultOption(option){
      this.chooseOption(option);
      if(option.isDefault){
        let parent = option.parent();
        while(parent != null){
          parent.isDefault = false;
          parent = parent.parent();
        }
        // 如果已经是默认值，则重置所有子选项的默认值
        this.resetDefaultValue(option.children);
        option.isDefault = false;
        return;
      }

      // 清空默认值
      this.resetDefaultValue(this.source.children)
      // 将当前选项和祖先选项设为默认值
      option.isDefault = true;
      let parent = option.parent();

      while(parent != null){
        parent.isDefault = true;
        parent = parent.parent();
      }
    },
    /** 重置默认值 */
    resetDefaultValue(children){
      for(let i = 0; i < children.length; i++){
        let item = children[i];
        item.isDefault = false;

        this.resetDefaultValue(this.toArray(item.children))
      }
    },
    /** 修改最大级数 */
    changeMaxDeep(value){
      !this.checkStrictly && this.resetDefaultValue(this.source.children); // 切换级数需要清除原先设置的默认条件(不能选任意节点的时候)
      this.maxDeep = value;
      // 重置数据
      this.source = this.initSource(null, false, this.source.children, null, null, this.isShow)
      this.initselectedOption();
    },
    /** 清除所有选择项 */
    clearActiveOption(children){
      for(let i = 0; i < children.length; i++){
        let item = children[i];
        item.active = false;

        this.clearActiveOption(this.toArray(item.children))
      }
    },
    // 获取多语言设置
    setlanguage(data, option){
      if (!option?.language) {
        option.language = {}
      }
      for (let i in data) {
        option.language[i] = data[i]
      }
      option.value = option.language[locales.locale]
    },
    activeOption(option){
      if(option == null || option.parent() == null) return;

      let parent = option.parent();
      let children = this.toArray(parent.children);

      for(let i = 0; i < children.length; i++) {
        children[i].active = false;
      }
      
      option.active = true;
      this.activeOption(parent)
    },
    /** 选中某一选项 */
    chooseOption(option, withSelect = false){
      this.activeOption(option);

      // 选中当前选项
      if(withSelect) this.$nextTick(() => this.selectOption(option.id));
      
      if(option.deep >= this.maxDeep) return;

      let selectedOption = [];
      if(this.selectedOption.length + 1 >= option.deep){
        selectedOption = this.selectedOption.slice(0, option.deep - 1);
      }

      let currOption = option;
      let newParent = {};
      for(let i = option.deep; i <= this.maxDeep; i++){
        if(currOption){
          selectedOption.push(currOption.parent());
          if(!currOption.children[0]) {
            newParent = currOption;
          }
          currOption = currOption.children[0];  
        }else{  
                      
          // 创建新的空节点
          selectedOption.push(newParent);
        }
            
      }
      this.selectedOption = selectedOption;
    },
    /** 删除选项 */
    removeOption(option){
      let msg = option.children.length > 0 ? this.$t('common.base.tip.confirmDeleteOptionWithChild') : this.$t('common.base.tip.confirmDeleteOption');
      platform.confirm(msg).then(value => {
        if(!value) return Promise.reject('cancel')
      })
        .then(() => {
          let deep = option.deep;
          let parent = option.parent();
          let source = parent == null ? this.source : parent.children;
          let selfIndex = source.indexOf(option);
          if(parent.deep == 0 && source.length == 1 ) return this.$message.warning(this.$t('common.base.tip.evenHaveOneOption2'));

          source.splice(selfIndex, 1);
          if(source.length){
            let activeIndex = selfIndex == 0 ? selfIndex : selfIndex - 1;

            this.chooseOption(source[activeIndex]);      
          }else{      
            this.chooseOption(parent)
          }
        })
        .catch(err => console.log(err))
    },
    /** 添加选项 */
    addChildrenOption(parent, index){
      if(parent.children.length == 0 && index > parent.deep ) return this.$message.warning(this.$t('common.base.tip.coverLastOptionTips'));

      // 根据当前最大级数，补全数据
      let value = `${this.$t('common.base.levelOption', {data1:this.deepZhChar[parent.deep]})} ${parent.children.length + 1}`;
      let option = new Option(value, false, parent);
      if(option.deep < this.maxDeep) this.addChildrenOption(option)
      parent.children.push(option);
     
      this.chooseOption(option, true)
    },
    /** 根据id选中对应的选项 */
    selectOption(id){
      let optionEl = this.$el.querySelector(`[data-option-id="${id}"]`)
      if(optionEl == null) return;

      let inputEl = optionEl.querySelector('.el-textarea__inner');
      if(inputEl == null) return;

      inputEl.focus();
      inputEl.select();
    },
    submit(){
      console.log('保存')
      let repeat = this.checkTreeNodeRepeat(this.source);
      if(repeat.length){
        FormUtil.notification([{ message:repeat, title: this.$t('common.base.duplicates')}], this.$createElement);
        return;
      }
      console.log('submit-----', this.exportSetting(this.source))
      // TODO: 计算选项总数
      this.$emit('update:show', false);
      this.$emit('close');
      this.$emit('input', this.exportSetting(this.source));
    },
    // 校验节点重复项
    checkTreeNodeRepeat(tree){
      let repeat = [];
      const loopTree = (tree, path = '') =>{
        let map = new Map();
        for(let i = 0;i < tree.length;i++){
          let node = tree[i];
          let key = path ? `${path}/${node.value}` : node.value;
          if(map.has(key)){
            repeat.push(map.get(key), key);
            map.delete(key);
          }else {
            map.set(key, key)
          }
          node.children && node.children.length && loopTree(node.children, key)
        }
      }
      loopTree(tree.children)
      return repeat;
    },
    close(){
      this.$emit('update:show', false);
      this.$emit('close');
      this.$emit('cancel');
    },
    destroyElement(){
      this.$emit('destroy');
    },
    /** 导出配置 */
    exportSetting(origin){ 
      let children = Array.isArray(origin.children) ? origin.children : [];

      let defaultValue = this.exportDefaultValue(children);
      let dataSource = this.exportSource(children);
      let dataSourceLanguage
      if (this.isShow) {
			  dataSourceLanguage = this.exportSourceLanguage(children);
      }

      return {dataSource, dataSourceLanguage, defaultValue, maxDeep: this.maxDeep};
    },
    /** 导出选项 */
    exportSource(children){
      let source = [];
      if(children.length == 0) return source;

      for(let i = 0; i < children.length; i++){
        let item = children[i];
        let option = {};

        option.value = item.value;
			  option.id = item.id;
        if(Array.isArray(item.children) && item.children.length > 0){
          option.children = this.exportSource(item.children);
        } 
        source.push(option);
      }
      return source;
    },
    /** 导出默认值 */
    exportDefaultValue(children){
      // 不允许有默认值直接返回
      if(!this.canSetDefault) return [];
      let defaultValue = [];
      let i = 0;

      while(i < children.length){
        let option = children[i];
        i++;

        if(option.isDefault){
          defaultValue.push(option.value);
          
          children = this.toArray(option.children);
          i = 0;
        }
      }

      return defaultValue;
    },
    /** 导出多语言选项 */
	  exportSourceLanguage(children) {
      if(!isOpenMultiLanguage) return null;
      let sourceLanguage = getDefaultLangOpts();

      Object.keys(sourceLanguage).forEach(key => {
        sourceLanguage[key] = this.getSourceByLanguage(children, key);
      });

      return sourceLanguage;
    },
    getSourceByLanguage(children, lang) {
      let source = [];
      if (children.length == 0) return source;

      for (let i = 0; i < children.length; i++) {
        let item = children[i];
        let option = {};

        option.value = item.language ? item.language[lang] || '' : '';
        // fix:23079,默认语言初始化数据问题
        if (lang == locales.locale && !option.value) {
          option.value = item.value || ''
        }
        option.id = item.id;

        if (Array.isArray(item.children) && item.children.length > 0) {
          option.children = this.getSourceByLanguage(item.children, lang);
        }
        source.push(option);
      }
      return source;
    },
    /** 初始化选中的项 */
    initselectedOption(){
      this.selectedOption = [];
      let option = this.source;
      let newParent = {};
        
      for(let i = 1; i <= this.maxDeep; i++){
        if(option){
          this.selectedOption.push(option);
          if(!option.children[0]) {
            newParent = option;
          }
          option = option.children[0];
        }else{
          // 创建新节点
          this.selectedOption.push(newParent);
        }
      }
    },
    initSource(value, isDefault, children, parent, idMap, isShow){
      let source = new Option(value, isDefault, parent);
      if(source.deep >= this.maxDeep) return source;

      // 如果级数小于最大级数，且没有子选项，就添加一个默认值
      // if(source.deep < this.maxDeep && children.length == 0) {
      //   children.push({value: `${this.deepZhChar[source.deep]}级选项 1`})
      // }
      
      // 处理子选项
      for(let i = 0; i < children.length; i++){
        let item = children[i] || {};
        let _value = item.value || `${this.$t('common.base.levelOption', {data1:this.deepZhChar[source.deep]})} ${i + 1}`;
        let _isDefault = item.isDefault === true; 
        let _children = this.toArray(item.children);

        let option = this.initSource(_value, _isDefault, _children, source, idMap, isShow);

        option.id = item.id || option.id;
        
				// 将idMap中对应id的language插入Source中；
				if (isShow && idMap && option.id) {
          let id = idMap.get(option.id) || idMap.get(option.id.toString())
					option.language = id ? { ...id } : getCommonDefaultLangForKey();
				}
        source.children.push(option);
      }

      return source;
    },
    getSourceIdMapByLanguage(language) {
			const idMap = new Map();
			if (!language || Object.keys(language).length <= 0) return null;

			Object.keys(language).forEach(key => {
				this.getMap(idMap, language[key], key);
			});

			return idMap;
		},
    getMap(idMap, lang, langKey) {
      // 目前存在没id的数据，而idMap这一部分的循环跟initSource分离了，导致id对应不上，取不到数据，不太好处理，
      // 暂时先根据initSource里的逻辑调整下id，确保生成的idMap能取到数据，后续看看怎么调整比较好
      let id = initOptionId
      lang.forEach(item => {
        id++
        item.id = item.id || ++id
        if (!idMap.has(item.id)) {
        idMap.set(item.id, { ...getCommonDefaultLangForKey(), [langKey]: item.value });
        } else {
          let tempObj = idMap.get(item.id);
          idMap.set(item.id, { ...tempObj, [langKey]: item.value });
        }

        if (item.children && item.children.length) {
          this.getMap(idMap, item.children, langKey);
        }
      });
    },
    initDataSource(data = []){

			const idMap = this.getSourceIdMapByLanguage(this.dataSourceLanguage);

      let defaultValue = _.cloneDeep(this.defaultValue);
      let origin = _.cloneDeep([...this.data, ...data]);
      this.initDefaultValue(origin, defaultValue);
      this.source = this.initSource(null, false, origin, null, idMap, this.isShow);
    },
    toArray(arr){
      return Array.isArray(arr) ? arr : [];
    },
    initDefaultValue(origin, defaultValue){
      let defValue = defaultValue.shift();

      for(let i = 0; i < origin.length; i++){
        let option = origin[i];
        if(option.value === defValue){
          option.isDefault = true;
          this.initDefaultValue(this.toArray(option.children), defaultValue)
          break;
        }
      }
    }
  },
  created(){
    this.initDataSource();
  },
  mounted(){
    this.initselectedOption();

    if(this.selectedOption.length > 0){
      let lastOption = this.selectedOption[this.selectedOption.length - 1];
      let children = this.toArray(lastOption.children);

      if(children.length > 0) this.chooseOption(children[0])
    }
  },
  watch: {
    source: {
      deep: true,
      handler(value, oldValue){
        let defaultValue = this.exportDefaultValue(this.toArray(value.children));
        let text = '--';
        if(defaultValue.length > 0){
          text = defaultValue.map(item => item.length >= 10 ? `${item.substring(0, 10) }...` : item).join(' / ')
        }
        this.defaultValueText = text;
      }
    }
  },
  components: {
    draggable,
    [CascaderSettingOption.name]: CascaderSettingOption
  }
}
</script>

<style lang="scss">
.cascader-setting-modal-header{
  position: relative;
  align-items: center;
  flex: 1;
  .cascader-setting-msg{
    float: left;
    line-height: 33px;
    small{
      font-size: 12px;
      color: #9a9a9a;

      i.iconfont{
        font-size: 13px;
        margin: 0 2px;
        @include fontColor();
        width: 16px;
        text-align: center;
      }
    }
  }
  .cascader-setting-deep{
    float: right;
    font-size: 14px;
    margin-right: 12px;
    .el-select{
      width: 100px;
      .el-input__inner{
        border-radius: 4px;
      }
    }
  }

  &-close{
    position: absolute;
    right: 0;
    top: 0;
    height: 40px;
    width: 40px;
    padding: 8px;
    margin: 0;
    
    background-color: transparent;
    border: none;
    outline: none;

    font-size: 14px;
    color: #999;
    font-weight: bold;

    cursor: pointer;

    &:hover{
      color: #e84040;
    }
  }
}

.cascader-setting-modal-body{
  padding: 8px 0;
  font-size: 14px;

  display: flex;
  flex-flow: row nowrap;
}

.cascader-setting-panel{
  padding: 0 15px;
  border-left: 1px solid #e5e5e5;

  h3{
    margin: 0;
    padding: 5px 0 8px;
    font-size: 14px;
  }

  &:first-child{
    border-left-color: transparent;
  }
}

.cascader-setting-modal-footer{
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  .cascader-setting-import-btn{
    flex: 1;
  }
}
.cascader-setting-modal-body{
  .cascader-setting-operation{

    .btn-text{
      width:72px;
      @include fontColor();
      display: block;
      cursor: pointer;
    }
  }
}

.cascader-setting-choose,
.cascader-setting-close{
  outline: none;
  border:none;
  height: 28px;
  padding: 0 10px;
  background-color: transparent;
  cursor: pointer;
  font-size: 13px;
  border-radius: 2px;
}


.cascader-setting-close{
  color: #333;
  background-color: #fff;
  height: 32px;
  line-height: 32px;
  min-width: 65px;

  transition: background-color ease .15s;

  &:hover{
    background-color: #f0f0f0;
  }
}

.cascader-setting-choose{
  background-color: #55b7b4;
  color: #fff;
  line-height: 32px;
  height: 32px;
  min-width: 65px;
}

.cascader-setting-btn{
  line-height: 24px;
  font-size: 14px;
  text-decoration: none;
  @include fontColor();
  user-select: none;
  display: block;
  margin-left: 8px;
}

.cascader-setting-default-text{
  flex: 1;
  padding: 0 20px;
  font-size: 14px;
  color: #666;
  margin: 32px 0;
}
.form-select-setting-modal {
  .dialog-footer{
    width: 100%;
  }
}
</style>

